/**
* 店铺服务页面-禹光彩--2017-9-11 15:23:07
*/
<template>
    <div>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px" >
        <el-form :inline="true" >
          <el-form-item>
            <el-input v-model="filters.serviceCode" class="width150" size="small" placeholder="服务代码" style="vertical-align:top;" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.serviceName" class="width150" size="small" placeholder="服务名称" style="vertical-align:top;" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.price" class="width150" size="small" placeholder="金额" style="vertical-align:top;" :maxlength="13"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.cycle" placeholder="周期" clearable size="small" style="vertical-align:top;">
              <el-option value="week" label="周"></el-option>
              <el-option value="month" label="月"></el-option>
              <el-option value="year" label="年"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker type="date" :editable="false" placeholder="开始时间" v-model="filters.startTime" style="vertical-align:top;" size="small" clearable></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker type="date" :editable="false" placeholder="结束时间" v-model="filters.endTime" style="vertical-align:top;" size="small" clearable></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" style="vertical-align:top;line-height:14px" v-on:click="searchAppService">查询</el-button>
          </el-form-item>
          <el-form-item class="button-align" v-if="getAuth(0)" style="margin-top: -4px;">
            <el-button type="primary" @click="appServiceAdd" size="small" style="height: 30px;">新增应用服务</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="appList" v-loading="listLoading" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" tooltipEffect="light">
        <!--<el-table-column type="selection"></el-table-column>-->
        <el-table-column align="center" prop="serviceCode" label="服务代码"></el-table-column>
        <el-table-column align="center" prop="serviceName" label="服务名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="serviceDescribe" label="服务描述" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="price" label="金额"></el-table-column>
        <el-table-column align="center" :formatter="formatCycle" label="周期"></el-table-column>
        <el-table-column align="center" :formatter="formatTime" label="创建时间"></el-table-column>
        <el-table-column align="center" width="150" label="操作">
          <template scope="scope">
            <el-button size="small" type="warning" @click="appServiceEdit(scope.$index, scope.row)" v-if="getAuth(2)">编辑</el-button>
            <el-button size="small" type="danger" @click="appServiceDelete(scope.$index, scope.row)" v-if="getAuth(1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
        <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;" :currentPage="page">
        </el-pagination>
      </el-col>
      <!-- 新增店铺服务弹框 -->
      <el-dialog :title="dialogTitle" v-model="showAdd" :close-on-click-modal="false" @close="resetAppService" size="small">
        <el-form :model="app" label-width="90px" :rules="appFormRules" ref="app" style="margin-top: -20px;">
          <el-form-item label="服务代码" prop="serviceCode" id="formheight">
            <el-input v-model="app.serviceCode" :maxlength="50" placeholder="请输入服务代码" :readonly="opType !== 'add'"></el-input>
          </el-form-item>
          <el-form-item label="服务名称" prop="serviceName" id="formheight">
            <el-input v-model="app.serviceName" :maxlength="50" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label="服务描述" prop="serviceDescribe">
            <el-input v-model="app.serviceDescribe" type="textarea" placeholder="请输入服务描述"></el-input>
          </el-form-item>
          <el-form-item label="金额" prop="price" id="formheight">
            <el-input v-model="app.price" placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item label="周期" prop="cycle" id="formheight">
            <el-select v-model="app.cycle" clearable style="width:290px;" placeholder="请选择周期">
              <el-option value="year" label="年"></el-option>
              <el-option value="month" label="月"></el-option>
              <el-option value="week" label="周"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div scope="footer" class="dialog-footer" style="float: right;margin-bottom: 20px;">
          <el-button @click.native="resetAppService">取消</el-button>
          <el-button type="primary" @click.native="appServiceSubmit" :loading="saveAppLoading">保存</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      // 判断输入的金额是不是数字
      var checkPrice = (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error('金额必须是数字类型'))
        } else {
          if (value.indexOf('.') > 0) {
            let nums = value.split('.')
            let intNum = nums[0]
            let floatNum = nums[1]
            if (intNum.length > 10) {
              callback(new Error('金额整数不能超过10位'))
            } else if (floatNum.length > 2) {
              callback(new Error('金额小数不能超过2位'))
            } else {
              callback()
            }
          }
          callback()
        }
      }
      var checkCode = (rule, value, callback) => {
        let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
        if (reg.test(value)) {
          callback(new Error('代码不能包含中文'))
        } else {
          callback()
        }
      }
      return {
        listLoading: false,
        saveAppLoading: false,
        opType: 'add',
        dialogTitle: '',
        showAdd: false,
        loginType: 0,
        pageSize: 10,
        page: 1,
        total: 0,
        cycleArr: {'week': '周', 'month': '月', 'year': '年'},
        filters: {
          serviceCode: '',
          serviceName: '',
          price: '',
          cycle: '',
          startTime: '',
          endTime: ''
        },
        appList: [],
        app: {
          serviceCode: '',
          serviceName: '',
          serviceDescribe: '',
          price: '',
          cycle: '',
          createTime: ''
        },
        appFormRules: {
          serviceCode: [
            {required: true, message: '请输入服务代码', trigger: 'blur'},
            {required: true, validator: checkCode, trigger: 'blur'}
          ],
          serviceName: [
            {required: true, message: '请输入服务名称', trigger: 'blur'}
          ],
          serviceDescribe: [
            {required: true, message: '请输入服务描述', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入金额', trigger: 'blur'},
            {required: true, validator: checkPrice, trigger: 'blur'}
          ],
          cycle: [
            {required: true, message: '请选择周期', trigger: 'change'}
          ]
        },
        adminAppButton: [614, 615, 616, 617] // 店铺服务按钮菜单【新增，删除，编辑，查询】
      }
    },
    methods: {
      formatTime (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      formatTime2 (time) {
        if (time === '') {
          return ''
        }
        var d = new Date(time)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        return year + '-' + month + '-' + date
      },
      formatCycle (row, column) {
        return this.cycleArr[row.cycle]
      },
      appServiceEdit (index, row) {
        this.app = Object.assign({}, row)
        this.dialogTitle = '编辑应用服务'
        this.opType = 'edit'
        this.showAdd = true
        this.app.price = this.app.price.toString()
      },
      appServiceDelete (index, row) {
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/appService/delete.htm', {id: row.id, type: this.loginType}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '删除应用服务成功',
                type: 'success'
              })
              this.initAppServiceList()
            } else if (resBody.isSuccess === 2) {
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          })
        }).catch(() => {})
      },
      searchAppService () {
        this.page = 1
        this.initAppServiceList()
      },
      // 新增弹框
      appServiceAdd () {
        this.opType = 'add'
        this.showAdd = true
        this.dialogTitle = '新增应用服务'
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.initAppServiceList()
      },
      // 分页查询的页数
      handleCurrentChange (val) {
        this.page = val
        this.initAppServiceList()
      },
      resetAppService () {
        this.showAdd = false
        this.app = {
          serviceCode: '',
          serviceName: '',
          serviceDescribe: '',
          price: '',
          cycle: ''
        }
        this.$refs['app'].resetFields()
      },
      appServiceSubmit () {
        this.$refs.app.validate((valid) => {
          if (valid) {
            let param = {
              appService: this.app,
              type: this.loginType
            }
            this.saveAppLoading = true
            this.$http.post('/smartLight/web/appService/save.htm', param).then(response => {
              this.saveAppLoading = false
              var resBody = response.body
              if (resBody.isSuccess === 0) {
                this.showAdd = false
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'success'
                })
                this.initAppServiceList()
              } else if (resBody.isSuccess === 2) {
                sessionOut(this) // session超时处理
              } else {
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      // 获取页面按钮权限
      getAuth (index) {
        if (this.loginType !== 0) { // 供应商/门店
          return false
        } else { // 运营
          let buttonIds = sessionStorage.getItem('buttonIds')
          if (buttonIds === null) {
            return false
          }
          let buttonId = this.adminAppButton[index]
          buttonIds = ',' + buttonIds + ','
          if (buttonIds.indexOf(',' + buttonId + ',') >= 0) {
            return true
          } else {
            return false
          }
        }
      },
      initAppServiceList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          serviceCode: this.filters.serviceCode,
          serviceName: this.filters.serviceName,
          price: this.filters.price,
          cycle: this.filters.cycle,
          startTime: this.formatTime2(this.filters.startTime),
          endTime: this.formatTime2(this.filters.endTime),
          type: this.loginType
        }
        this.$http.post('/smartLight/web/appService/getPageList.htm', para).then(response => {
          let resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.appList = resBody.result.content
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      }
    },
    mounted () {
      // 初始化列表
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.loginType = user.type
        // 浏览器向前或向后处理
        resetBreads(this)
        this.initAppServiceList()
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .width150
    width: 150px;
  .is-light
    max-width :600px;
  .tabRow
    font-size: 12px;
    .button-align
      float: right;
  #formheight
    margin: 14px 0;
    height: 38px;
    .el-form-item__content
      height: 30px;
      .el-form-item__error
        margin-top:3px
    .el-input
      height: 30px;
      .el-input__inner
        height: 30px;
  .el-textarea
    textarea
      height:120px;
</style>
